<template>
  <div class="food-content-box discount-box">
    <el-breadcrumb separator="/" class="page-title">
      <!--<el-breadcrumb-item :to="{ path: '@/devlopmentList' }">{{$t('m.DeveloperAdvertisement')}}</el-breadcrumb-item>-->
      <el-breadcrumb-item>{{$t('m.Discounts')}}</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="search-box container-padding">
      <el-form :inline="true" label-position="top" :model="submitForm" size="mini" ref="submitForm"  class="form-min-width">
        <div class="container-box label-style">
          <span class="label-title">{{$t('m.Restaurant')}}</span>
          <span class="label-title">{{this.id}}</span>
          <el-row :gutter="20">
            <el-col>
              <el-form-item :label="$t('m.Status')" clearable>
                <el-select  style="width: 200px" v-model="submitForm.status" placeholder="">
                  <el-option v-for="rg in status" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
            <el-button type="primary" size="medium" @click="searchDiscountForm()">{{$t('m.Search')}}</el-button>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div class="bottom-line margin-line"></div>
      <el-form :inline="true" label-position="top" :model="addDiscountForm" size="mini" ref="addDiscountForm"  class="form-min-width">
        <div class="container-box label-style">
          <el-row :gutter="20">
            <el-col>
              <el-form-item :label="$t('m.Day')">
                <el-select  style="width: 100px" v-model="addDiscountForm.day" placeholder="" :disabled="isCanAddNew">
                  <el-option v-for="rg in days" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('m.Time')">
                <el-select  style="width: 100px" v-model="addDiscountForm.timeHour" placeholder="" :disabled="isCanAddNew">
                  <el-option v-for="rg in times" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="margin-top: 38px;">
                <el-select  style="width: 100px" v-model="addDiscountForm.timeMinute" placeholder="" :disabled="isCanAddNew">
                  <el-option v-for="rg in timeMins" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="margin-top: 38px;">
                <el-select  style="width: 100px" v-model="addDiscountForm.timeFlag" placeholder="" :disabled="isCanAddNew">
                  <el-option v-for="rg in timeAPs" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item :label="$t('m.Discount')">
                <el-select  style="width: 200px" v-model="addDiscountForm.discount" placeholder="" :disabled="isCanAddNew">
                  <el-option v-for="rg in discounts" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('m.Seatavailable')">
                <el-select  style="width: 200px" v-model="addDiscountForm.seatAvailable" placeholder="" :disabled="isCanAddNew">
                  <el-option v-for="rg in availables" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-button type="warning" size="medium" @click="addDiscountFormUpload()" :disabled="isCanAddNew">{{$t('m.Adddiscount')}}</el-button>
            </el-col>
            <!--表格-->
            <el-col style="margin-top:20px;" v-loading="tableLoading">
              <div v-for="tableData in tableDataList" style="margin-top:20px;">
                <span class="label-title">{{tableData.text}}</span>
                <el-table
                  :data="tableData.data"
                  border
                  @selection-change="handleSelectionChange"
                  style="width: 100%;">
                  <!--Delete-->
                  <el-table-column
                    prop="Delete"
                    label="Delete"
                    align="center"
                    min-width="100">
                    <template slot-scope="scope">
                      <el-button @click="Delete(scope.row.discountId, scope.row.status)" type="text"  v-if="scope.row.status">Delete</el-button>
                      <el-button @click="Delete(scope.row.discountId, scope.row.status)" type="text"  v-else>Active</el-button>
                    </template>
                  </el-table-column>
                  <!--Status-->
                  <el-table-column
                    prop="Status"
                    label="Status"
                    align="center"
                    min-width="120">
                    <template slot-scope="scope">
                      <!--<div class="list-notes">{{getStatusItem(scope.row.status)}}</div>-->
                      <div class="list-notes" v-if="scope.row.status">Active</div>
                      <div class="list-notes" v-else>Delete</div>
                    </template>
                  </el-table-column>
                  <!--Discount %-->
                  <el-table-column
                    prop="discount"
                    label="Discount %"
                    align="center"
                    min-width="100">
                    <template slot-scope="scope">
                      <p>{{scope.row.discount}}</p>
                    </template>
                  </el-table-column>

                  <!--Seat available-->
                  <el-table-column
                    prop="seatAvailable"
                    label="Seat available"
                    align="center"
                    min-width="120">
                    <template slot-scope="scope">
                      <p>{{scope.row.seatAvailable}}</p>
                    </template>
                  </el-table-column>
                  <!--Time-->
                  <el-table-column
                    prop="time"
                    label="Time"
                    align="center"
                    min-width="120">
                    <template slot-scope="scope">
                      <p>{{getDateTime(scope.row.timeHour, scope.row.timeMinute, scope.row.timeFlag)}}</p>
                    </template>
                  </el-table-column>
                  <!--Created Date-->
                  <el-table-column
                    prop="CreatedDate"
                    label="Created Date"
                    align="center"
                    min-width="160">
                    <template slot-scope="scope">
                      <div class="list-notes">{{getDate(scope.row.createDatetime)}}</div>
                    </template>
                  </el-table-column>
                  <!--Created By-->
                  <el-table-column
                    prop="CreatedBy"
                    label="Created By"
                    align="center"
                    min-width="120">
                    <template slot-scope="scope">
                      <div class="list-notes">{{scope.row.createBy}}</div>
                    </template>
                  </el-table-column>
                  <!--Updated Date-->
                  <el-table-column
                    prop="UpdatedDate"
                    label="Updated Date"
                    align="center"
                    min-width="160">
                    <template slot-scope="scope">
                      <div class="list-notes">{{getDate(scope.row.updateDatetime)}}</div>
                    </template>
                  </el-table-column>
                  <!--Updated By-->
                  <el-table-column
                    prop="UpdatedBy"
                    label="Updated By"
                    align="center"
                    min-width="120">
                    <template slot-scope="scope">
                      <div class="list-notes">{{scope.row.updateBy}}</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
  import { searchDiscount, initRestaurant, uploadDiscountForm, changeStatus } from '../../api/mgc_api'
  import Qs from 'qs'
  export default {
    name: 'Discount',
    data() {
      return {
        times: [
          {"value": 1, "text": "1"},
          {"value": 2, "text": "2"},
          {"value": 3, "text": "3"},
          {"value": 4, "text": "4"},
          {"value": 5, "text": "5"},
          {"value": 6, "text": "6"},
          {"value": 7, "text": "7"},
          {"value": 8, "text": "8"},
          {"value": 9, "text": "9"},
          {"value": 10, "text": "10"},
          {"value": 11, "text": "11"},
          {"value": 12, "text": "12"},
        ],
        timeMins: [
          {"value": 0, "text": "00"},
          {"value": 30, "text": "30"},
        ],
        timeAPs: [
          {"value": 0, "text": "AM"},
          {"value": 1, "text": "PM"},
        ],
        discounts: [
          {"value": 10, "text": "10"},
          {"value": 15, "text": "15"},
          {"value": 20, "text": "20"},
          {"value": 25, "text": "25"},
          {"value": 30, "text": "30"},
          {"value": 35, "text": "35"},
          {"value": 40, "text": "40"},
          {"value": 45, "text": "45"},
          {"value": 50, "text": "50"},
        ],
        availables: [
          {"text":"1","value":1},
          {"text":"2","value":2},
          {"text":"3","value":3},
          {"text":"4","value":4},
          {"text":"5","value":5},
          {"text":"6","value":6},
          {"text":"7","value":7},
          {"text":"8","value":8},
          {"text":"9","value":9},
          {"text":"10","value":10},
          {"text":"11","value":11},
          {"text":"12","value":12},
          {"text":"13","value":13},
          {"text":"14","value":14},
          {"text":"15","value":15},
          {"text":"16","value":16},
          {"text":"17","value":17},
          {"text":"18","value":18},
          {"text":"19","value":19},
          {"text":"20","value":20},
          {"text":"21","value":21},
          {"text":"22","value":22},
          {"text":"23","value":23},
          {"text":"24","value":24},
          {"text":"25","value":25},
          {"text":"26","value":26},
          {"text":"27","value":27},
          {"text":"28","value":28},
          {"text":"29","value":29},
          {"text":"30","value":30},
          {"text":"31","value":31},
          {"text":"32","value":32},
          {"text":"33","value":33},
          {"text":"34","value":34},
          {"text":"35","value":35},
          {"text":"36","value":36},
          {"text":"37","value":37},
          {"text":"38","value":38},
          {"text":"39","value":39},
          {"text":"40","value":40},
          {"text":"41","value":41},
          {"text":"42","value":42},
          {"text":"43","value":43},
          {"text":"44","value":44},
          {"text":"45","value":45},
          {"text":"46","value":46},
          {"text":"47","value":47},
          {"text":"48","value":48},
          {"text":"49","value":49},
          {"text":"50","value":50},
          {"text":"51","value":51},
          {"text":"52","value":52},
          {"text":"53","value":53},
          {"text":"54","value":54},
          {"text":"55","value":55},
          {"text":"56","value":56},
          {"text":"57","value":57},
          {"text":"58","value":58},
          {"text":"59","value":59},
          {"text":"60","value":60},
          {"text":"61","value":61},
          {"text":"62","value":62},
          {"text":"63","value":63},
          {"text":"64","value":64},
          {"text":"65","value":65},
          {"text":"66","value":66},
          {"text":"67","value":67},
          {"text":"68","value":68},
          {"text":"69","value":69},
          {"text":"70","value":70},
          {"text":"71","value":71},
          {"text":"72","value":72},
          {"text":"73","value":73},
          {"text":"74","value":74},
          {"text":"75","value":75},
          {"text":"76","value":76},
          {"text":"77","value":77},
          {"text":"78","value":78},
          {"text":"79","value":79},
          {"text":"80","value":80},
          {"text":"81","value":81},
          {"text":"82","value":82},
          {"text":"83","value":83},
          {"text":"84","value":84},
          {"text":"85","value":85},
          {"text":"86","value":86},
          {"text":"87","value":87},
          {"text":"88","value":88},
          {"text":"89","value":89},
          {"text":"90","value":90},
          {"text":"91","value":91},
          {"text":"92","value":92},
          {"text":"93","value":93},
          {"text":"94","value":94},
          {"text":"95","value":95},
          {"text":"96","value":96},
          {"text":"97","value":97},
          {"text":"98","value":98},
          {"text":"99","value":99},
          {"text":"100","value":100}
        ],
        id: null,
        discountId: null,
        submitForm: {
          // 表单数据必填字段
          status: null,
        },
        addDiscountForm: {
          day: 0,
          timeHour: 1,
          timeMinute: 0,
          timeFlag: 0,
          discount: 10,
          seatAvailable: 1,
        },
        tableLoading: false,
        fullscreenLoading: false,
        isCanAddNew: false,
        tableDataList: [
          {'text': 'Sunday', "data": []},
          {'text': 'Monday', "data": []},
          {'text': 'Tuesday', "data": []},
          {'text': 'Wednesday', "data": []},
          {'text': 'Thursday', "data": []},
          {'text': 'Friday', "data": []},
          {'text': 'Saturday', "data": []}
        ]
      }
    },
    computed: {
      status() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"value":	1	,"text":"Active"},
            {"value":	2	,"text":"Delete"},
          ]
        } else {
          return [
            {"value":	1	,"text":"Active"},
            {"value":	2	,"text":"Delete"},
          ]
        }
      },
      days() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"value": 0, "text": "Sun"},
            {"value": 1, "text": "Mon"},
            {"value": 2, "text": "Tue"},
            {"value": 3, "text": "Wed"},
            {"value": 4, "text": "Thu"},
            {"value": 5, "text": "Fri"},
            {"value": 6, "text": "Sat"},
          ]
        } else {
          return [
            {"value": 0, "text": "Sun"},
            {"value": 1, "text": "Mon"},
            {"value": 2, "text": "Tue"},
            {"value": 3, "text": "Wed"},
            {"value": 4, "text": "Thu"},
            {"value": 5, "text": "Fri"},
            {"value": 6, "text": "Sat"},
          ]
        }
      },
    },
    methods: {
      // message alert 用于前端错误提示信息
      messageToastErr (msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 1500,
          type: 'error'
        })
      },
      getStatusItem (it) {
        let str = ''
        this.status.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getDate (value) {
        if(!value){
          return ''
        }
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        var ts = Y + '-' + m + '-' + d + '  ' + H + ':' + i + ':' + s
        return ts
      },
      getDateTime(h, m, f){
        let timeMinute = ''
        let timeFlag = ''
        if (m == 0) {
          timeMinute = '00'
        } else {
          timeMinute = m
        }
        if (f == 0) {
          timeFlag = 'AM'
        } else {
          timeFlag = 'PM'
        }
        return h + ':' + timeMinute + "  " + timeFlag
      },
      searchDiscountForm() {
        this.tableLoading = true
        for (var j = 0; j < this.tableDataList.length; j++) {
          this.tableDataList[j].data = []
        }
        let params = {
          restaurantId: this.id,
          status: this.submitForm.status
        }
        params = Qs.stringify(params)
        searchDiscount(params)
          .then((res) => {
            if (res) {
              if (res.data.errorID == 0) {
                console.log(res)
                // this.tableData = res.data.object
                if (res.data.object.length > 0) {
                  for (var i = 0; i < res.data.object.length; i++) {
                    for (var j = 0; j < this.tableDataList.length; j++) {
                      if (res.data.object[i].day == j) {
                        this.tableDataList[j].data.push(res.data.object[i])
                        // console.log(res.data.object[i], 'i')
                        // console.log(this.tableDataList[j].data, 'j')
                      }
                    }
                  }
                  console.log(this.tableDataList)
                }
                // 分页信息配置
                // this.pageInfo.totalPages = data.data.pages
                // this.pageInfo.totalCount = data.data.total
                // 清除loading 状态
                setTimeout(() => {
                  this.tableLoading = false
                }, 400)
              } else {
                this.messageToastErr(res.data.message)
              }
            }
          })
          .catch((error) => {
            // this.showToast(error.errorID)
            // console.log(error)
            this.messageToastErr('error,please refresh the page later')
            setTimeout(() => {
              this.tableLoading = false
            }, 400)
          })
      },
      addDiscountFormUpload() {
        //新增 -- 表单信息
        let formAjaxData = {
          restaurantId: this.id,
          day: this.addDiscountForm.day,
          timeHour: this.addDiscountForm.timeHour,
          timeMinute: this.addDiscountForm.timeMinute,
          timeFlag: this.addDiscountForm.timeFlag,
          discount: this.addDiscountForm.discount,
          seatAvailable: this.addDiscountForm.seatAvailable,
        }
        let params = Qs.stringify(formAjaxData)
        let config = {
          'Content-Type': 'multipart/form-data'
        }
        this.fullscreenLoading = true
        uploadDiscountForm(params, config)
          .then((res) => {
            console.log(res)
            if (res) {
              if (res.data.errorID == 0) {
                this.discountId = res.data.object.id
                this.searchDiscountForm()
              } else {
                this.messageToastErr(res.data.message)
              }
            }
            this.fullscreenLoading = false
          })
          .catch((error) => {
            console.log(error)
            this.fullscreenLoading = false
            this.messageToastErr('error,please try again leter')
          })
      },
      Delete(id, status) {
        this.$prompt('This data will be change status.  Please type "1" to confirm.', 'Delete confirm！', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          inputPattern: /1/,
          inputErrorMessage: 'Enter error',
          inputValidator: (value) => {
            // 继续校验
            if (!(value == 1 && value.length == 1)) {
              return false
            }
          }
        })
          .then(() => {
            let sendData = {
              status: !status,
              discountId: id,
            }
            let params = Qs.stringify(sendData)
            let config = {
              'Content-Type': 'multipart/form-data'
            }
            this.fullscreenLoading = false
            changeStatus(params, config)
              .then((res) => {
                console.log(res)
                if (res) {
                  if (res.data.errorID == 0) {
                    this.searchDiscountForm()
                  } else {
                    this.messageToastErr(res.data.message)
                  }
                }
                this.fullscreenLoading = false
              })
              .catch((error) => {
                this.messageToastErr(error.errorID)
                this.fullscreenLoading = false
              })
          })
          .catch(() => {
          })
      },
      handleSelectionChange () {

      }
    },
    mounted () {
      this.id = this.$route.query.id || ''
      //没有餐馆id时不可新增discount
      if (!this.id) {
        this.isCanAddNew = true
      }
      this.searchDiscountForm()
    }
  }
</script>
<style>
  .discount-box .el-table td {
    padding:0!important;
  }
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }
  .food-content-box .container-padding {
    padding: 20px 40px 0 40px;
  }
  .label-title {
    display: block;
    line-height:28px;
    padding:0 0 10px 0;
    font-size: 14px;
    color: #606266;
  }
  .bottom-line{
    border-bottom: 1px solid #e6e6e6;
  }
  .margin-line{
    margin:10px 0;
  }
  .list-notes{
    text-align: center;
    display: block;
  }
</style>
